<template>
    <el-card>
        <el-form>
            <el-table border :data="skuArr">
                <el-table-column label="序号" type="index" align="center" width="80px">

                </el-table-column>
                <el-table-column label="名称" align="center" prop="skuName">

                </el-table-column>
                <el-table-column label="描述" align="center" prop="skuDesc">

                </el-table-column>
                <el-table-column label="默认图片" align="center">
                    <template #="{ row, $index }">
                        <img :src="row.skuDefaultImg" style="width: 100px; height: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column label="重量" align="center" prop="weight" width="100">

                </el-table-column>
                <el-table-column label="价格(元)" align="center" prop="price" width="100">

                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" :icon="row.isSale == 1 ? 'Bottom' : 'top'"
                            @click="updateSale(row)"></el-button>
                        <el-button type="primary" size="small" icon="Edit"></el-button>
                        <el-button type="primary" size="small" icon="View" @click="findSku(row)"></el-button>
                        <el-popconfirm title="确定删除吗？" icon="DeleteFilled" icon-color="#f56c6c" @confirm="tapdelete(row)">
                            <template #reference>
                                <el-button type="danger" size="small" icon="Delete"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <el-pagination style="margin: 10px 0;" v-model:current-page="pageNo" v-model:page-size="limit"
            :page-sizes="[3, 5, 7, 9]" :background="true" @current-change="getHasSku" @size-change="handler"
            layout="prev, pager,next, jumper,->, sizes,total,  " :total="total" />
        <el-drawer v-model="drawer" title="查看商品详情" size="35%" class="drawercs">
            <el-row>
                <el-col :span="8">名称</el-col>
                <el-col :span="16">{{ skuinfo.skuName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">描述</el-col>
                <el-col :span="16">{{ skuinfo.skuDesc }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">价格</el-col>
                <el-col :span="16">{{ skuinfo.price }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="8">平台属性</el-col>
                <el-col :span="16" >
                    <el-tag v-for="item in skuinfo.skuAttrValueList" :key="item.id" class="itemattrName">
                        {{ item.attrName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">销售属性</el-col>
                <el-col :span="16">
                    <el-tag v-for="itemx in skuinfo.skuSaleAttrValueList" :key="itemx.id" class="itemattrName">
                        {{ itemx.saleAttrValueName }}
                    </el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">商品图片</el-col>
                <el-col :span="16">
                    <el-carousel height="150px">
                        <el-carousel-item v-for="item in skuinfo.skuImageList" :key="item.id">
                            <img :src="item.imgUrl" style="width: 100%;" />
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </el-card>
</template>
<script setup>
import { getlist, onSale, cancelSale, getSkuInfo, deleteSku } from '@/api/product/sku/index.js'
import { ref, onMounted } from 'vue'

let pageNo = ref(1)
let limit = ref(3)
let total = ref(0)
let skuArr = ref([])
let skuinfo = ref([])
let drawer = ref(false)
onMounted(() => {
    getHasSku()
})
const getHasSku = (page = 1) => {
    pageNo.value = page
    getlist(pageNo.value, limit.value).then(res => {
        console.log(res);
        if (res.code == 200) {
            skuArr.value = res.data.records
            total.value = res.data.total
            console.log(skuArr);
        }
    })
}
const handler = () => {
    getHasSku()
    console.log(111);
}
const updateSale = (row) => {
    console.log(row);
    if (row.isSale == 1) {
        cancelSale(row.id).then(res => {
            console.log(res);
            if (res.code == 200) {
                getHasSku()
            }
        })
    } else {
        onSale(row.id).then(res => {
            if (res.code == 200) {
                getHasSku()
            }
        })
    }
}
const findSku = (row) => {
    console.log(11);
    drawer.value = true
    getSkuInfo(row.id).then(res => {
        if (res.code == 200) {
            skuinfo.value = res.data
        }
        console.log(res);
    })
}
const tapdelete = (row) => {
    deleteSku(row.id).then(res => {
        console.log(res);
        if (res.code == 200) {
            ElMessage.success(res.message)
            getHasSku(pageNo.value)
        } else {
            ElMessage.error(res.message)
        }
    })
} 
</script>
<style scoped lang="scss">
.drawercs{
    .el-row{

        padding: 10px 0;
    }
    .itemattrName{
        margin:5px 10px;
    }
}
</style>